<template>
  <div class="departments">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>亚洲风情</span>
      </div>
      <div class="content_header">
        <treeItem
          class="el-icon-video-camera-solid"
          :item="topInfo"
          :isTop="true"
        ></treeItem>
        <hr />
      </div>
      <div class="tree">
        <el-tree :data="treedata" :props="{ label: 'name' }">
          <template v-slot="{ data }">
            <treeItem :item="data" style="width:100%" />
          </template>
        </el-tree>
      </div>
      <depDialog :allList="listData" />
    </el-card>
  </div>
</template>

<script>
import treeItem from './components/item.vue'
import { department } from '@/api/treeitem.js'
import depDialog from './components/depDialog.vue'
export default {
  components: { treeItem, depDialog },
  data () {
    return {
      topInfo: {
        name: '快播影音',
        manager: '负责人',
        id: ''
      },
      listData:[],
      treedata: [
        {
          name: '番茄鼻屎',
          manager: '马飞',
          children: {
            name: '黄瓜鼻屎',
            manager: '马飞飞'
          }
        }
      ]
    }
  },
  methods: {
    async getdepartments () {
      const res = await department()
      this.treedata = this.changeData(res.data.depts, '')
      this.topInfo.name = res.data.companyName
      this.listData = res.data.depts
    },
    changeData (arr, pid = '') {
      return arr.filter(val => {
        if (val.pid === pid) {
          val.children = this.changeData(arr, val.id)
          return true
        }
      })
    }
  },
  async created () {
    this.getdepartments()
  }
}
</script>

<style lang="scss" scoped>
.departments {
  border: 15px solid #eee;
  .content_header {
    padding: 0 40px;
    hr {
      border: 1px solid #eee;
    }
  }
  .tree {
    padding: 0 40px;
  }
}
</style>
